'use client'
import { useState, useEffect } from 'react'
import PageContainer from '@/components/PageContainer'
import DeckSelection from '@/components/study/DeckSelection'
import StudyCard from '@/components/study/StudyCard'
import StudyComplete from '@/components/study/StudyComplete'
import { useStudyStats } from '@/hooks/useStudyStats'
import { useStudySession } from '@/hooks/useStudySession'

export default function StudyPage() {
  const [mounted, setMounted] = useState(false)
  const { decks, dailyStats, refreshStats } = useStudyStats()
  const {
    currentCard,
    showAnswer,
    selectedDeckId,
    remainingCards,
    setShowAnswer,
    handleAnswer,
    startStudy,
    endStudy
  } = useStudySession(refreshStats)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <PageContainer>
      <div >
        {!selectedDeckId ? (
          <DeckSelection 
            decks={decks} 
            dailyStats={dailyStats} 
            onStartStudy={startStudy} 
            onDataChange={refreshStats}
          />
        ) : (
          <div>
            {currentCard ? (
              <StudyCard
                card={currentCard}
                showAnswer={showAnswer}
                onShowAnswer={() => setShowAnswer(true)}
                onAnswer={handleAnswer}
                deckName={decks.find(d => d.id === selectedDeckId)?.name}
                remainingCount={remainingCards.length}
                onEndStudy={endStudy}
              />
            ) : (
              <StudyComplete onReturn={endStudy} />
            )}
          </div>
        )}
      </div>
    </PageContainer>
  )
}